<template>
    <div class="editorWrap">
        <div :class=classname style="text-align:left"></div>
        <div id="submit" :style="'height:' + submitHeight + 'px;line-height:' + submitHeight + 'px;'" v-on:click="getContent">提交</div>
    </div>
</template>

<script>
    import E from 'wangeditor'

    export default {
        name: "editor",
        props: {
            data: "",
            classname:""
        },
        data() {
            return {
                editorContent: '',
                submitHeight: 30
            }
        },
        methods: {
            getContent: function() {
                this.$emit('getEditorData', this.editorContent)
            }
        },
        mounted() {

            const editor = new E(`.`+this.classname)
            editor.config.height = 150
            editor.config.excludeMenus = [

                'video'
            ]
            editor.config.onchange = (html) => {
                this.editorContent = html
            }
            editor.config.uploadImgShowBase64 = true   // 使用 base64 保存图片
            editor.config.zIndex = 2
             editor.config.uploadImgServer = '/upload'  // 上传图片到服务器
            editor.create()
            this.submitHeight = document.getElementsByClassName('w-e-toolbar')[0].offsetHeight
            if (this.data){
                editor.txt.html(this.data)
            }
        }
    }
</script>

<style scoped lang="scss">
    .editorWrap {
        position: relative;
    #submit {
        position: absolute;
        top: 0px;
        right: 0;
        width: 60px;
        text-align: center;
        cursor: pointer;
        z-index: 3;

    }
    #submit:hover {
        color: #00b7ee;
    }
    .w-e-text-container {
        z-index: 2!important;
    }
    }
</style>
